<template>
	<view>
		<view class="header status_bar" :class="scrrol == true ? 'scrrolHeader' : ''">
			<!-- <view class="back iconfont icon-xiangzuo1" @tap="backPage"></view> -->
			<view class="text">精品车</view>
		</view>				
		<view class="search_maxbox" :class="scrrol == true ? 'scrrolHeader02' : ''">
			<view class="search_box">
				<view class="city_box" @tap="openAddres">
					<view class="city">{{pickerText}}</view>
					<view class="arrow iconfont icon-shixinjiantouxiangxia"></view>
				</view>
				<view class="search">
					<view class="icon iconfont icon-sousuo" @click="to_search()"></view>
					<input type="text" v-model="search_key" @confirm="to_search()" placeholder="搜索品牌、车型" />
				</view>
			</view>
		</view>
		<view class="clear_box"></view>
		<view class="clear_box02"></view>
		
	
		<view class="goods_box">
			<block  v-for="(item,idx) in list" :key="idx" >
				<view class="goods" :data-url="'/pages/goods/goods?id='+item.id" @click="gotopage" >
					<view class="goods_img">
						<image :src="realUrl(item.logo)" mode="scaleToFill"></image>
					</view>
					<view class="title">{{item.title}}</view>
					<view class="text">{{item.reg_time|formatY}}年 / {{item.mileage}}万公里 / {{item.city_name}}</view>
					<view class="tag_box">
						
						
						<block v-if="item.labels.length != 0">
							<view class="tag" v-for="(tag,idx1) in item.labels.slice(0,3)" :key="idx1">{{tag.title}}</view>
						</block>
						<block v-else>
							<view class="tag" v-if="item.check_url != ''">检测报告</view>
							<view class="tag" v-if="item.state==1">精品车</view>
							<view class="tag" v-if="item.energy">{{item.energy}} </view>
							<!-- <view class="tag" v-else-if="item.state==2">瑕疵车</view> -->
						</block>
						
					</view>
					<view class="num">已租次数 {{item.call|to_cn}}</view>
				</view>
			</block>
			<block v-if="empty_show">
				<view style="height: 30vh;padding-top: 25vw;width: 100vw;" v-if="list.length==0">
					<u-empty text="暂无此类车源" mode="list"></u-empty>
				</view>
			</block>
		</view>
		
		<!-- <simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm" themeColor="#333"></simple-address> -->
		
		<address-city ref="addressCity" :pickerValueDefault="cityPickerValueDefault" @onCancel="toCancel"  @onConfirm="onConfirm" themeColor="#333"></address-city>
		
	</view>
</template>

<script>
	import helper from '@/common/helper.js';
	import addressCity from '@/components/simple-address/address-city.vue';
	// import simpleAddress from '@/components/simple-address/simple-address.vue';
	import act_mixin from '@/lib/mixin/act_mixin.js';
	export default {
		mixins:[act_mixin],
		data() {
			return {
				page:1,
				scrrol:false,
				info:'',
				cityPickerValueDefault: [0, 0, 1],
				pickerText: '请选择',
				search_key : '',
				
			}
		},
		components: {
			addressCity
		},
		onReachBottom() {
	      this.loadData();
		},
		filters:{
			to_cn(num){
				return helper.num2cn(num);
			}
		},
		onLoad() {
			this.loadData();
		},
		methods: {
			loadData(){
				if(this.load_type == 'loading' || this.load_type == 'no_more'){
					return;
				}
				let url = this.site_url + 'api/index/index_load?page='+this.page;
			    let param = {keyword : this.search_key,city_name : this.pickerText};
				this.areq(url,param,'POST').then(res=>{
					this.empty_show = 1;
					 if(res.code == 1){
						 this.page++; 
						 this.list = [...this.list,...res.data];
					 }else{
						this.load_type = 'no_more';
					}
				})
				
			},
			page_init(){
				this.list = [];
				this.page = 1;
				this.load_type = 'more';
				this.loadData();
			},
			to_search(){
				uni.$u.throttle(this.real_search, 800);
			},
			real_search(){
				this.page_init();
			},
			openAddres() {
				this.cityPickerValueDefault = [0, 0, 1];
				this.$refs.addressCity.open();
			},
			toCancel(e){
				this.pickerText = '请选择';
				this.page_init();
			},
			onConfirm(e) {
		     	let pickerText = e.labelArr[1];
				this.pickerText = pickerText.replace(/\"/g,"");
				this.page_init();
				//console.log(that.pickerText);
			},
			gotopage(e) {
				let url = e.currentTarget.dataset.url;
				this.$r(url);
			},

		},
		onPageScroll: function(Object) {
			//console.log(Object.scrollTop); //实时获取到滚动的值
			if (Object.scrollTop > 28) {
				this.scrrol = true;
				/* #ifdef APP-PLUS */
				/* #endif */
			} else if (Object.scrollTop < 28) {
				this.scrrol = false;
				/* #ifdef APP-PLUS */
				/* #endif */
			}
		},
	
	}
</script>

<style>
	.header{
		background-color: #FC5D20;
	}
	.scrrolHeader{
		background-color: #FC5D20 !important;
	}
	.scrrolHeader02{
		background-color: #fff !important;
	}
	.clear_box02{
		width: 100%;
		height: calc(18vw + var(--status-bar-height));;
	}
	.search_maxbox{
		width: 100%;
		padding: 3vw 4%;
		position: fixed;
		left: 0;
		top: calc(13.5vw + var(--status-bar-height));
		z-index: 98;
	}
	.search_box{
		width: 100%;
		border-radius: 2vw;
		border: 1px solid #FC5D20;
		display: flex;
		align-items: center;
		height: 12vw;
	}
	
	.search_box .city_box{
		display: flex;
		align-items: center;
		padding: 0 2vw;
		border-right: 1px solid #E8E8F0;
		margin-right: 2vw;
	}
	
	.search_box .city_box .city{
		font-size: 3.8vw;
		color: #979AA9;
		margin-right: 1vw;
	}
	
	.search_box .city_box .arrow{
		font-size: 3vw;
		color: #979AA9;
	}
	
	.search_box .search{
		flex: 1;
		display: flex;
		align-items: center;
	}
	
	.search_box .search .icon{
		font-size: 4vw;
		color: #979AA9;
		margin-right: 2vw;
	}
	
	.search_box .search input{
		flex: 1;
		font-size: 3.5vw;
		color: #333;
	}
	
	.goods_box{
		width: 92%;
		margin: 0 auto;
		margin-top: 1%;
		display: flex;
		flex-direction: row;
		justify-content: left;
		flex-wrap: wrap;
	}
	
	.goods_box::after {
		flex: auto;
		content: '';
	}
	
	.goods_box .goods{
		width: 48%;
		margin-left: 4%;
		padding: 3vw;
		background-color: #fff;
		border-radius: 3vw;
		margin-bottom: 4%;
	}
	
	.goods_box .goods:nth-child(2n + 1){
		margin-left: 0;
	}
	
	.goods_box .goods .goods_img{
		width: 100%;
		height: 36vw;
	}
	
	.goods_box .goods .goods_img image{
		width: 100%;
		height: 100%;
		border-radius: 2vw;
	}
	
	.goods_box .goods .title{
		font-size: 3.5vw;
		color: #333;
		font-weight: bold;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		margin-top: 2vw;
	}
	
	.goods_box .goods .text{
		font-size: 3vw;
		color: #979AA9;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
		margin-top: 0.5vw;
	}
	
	.goods_box .goods .tag_box{
		width: 100%;
		display: flex;
		align-items: center;
		margin-top: 1vw;
	}
	
	.goods_box .goods .tag_box .tag{
		height: 4vw;
		line-height: 4vw;
		padding: 0 1.5vw;
		border-radius: 1vw;
		font-size: 2.5vw;
		margin-left: 1vw;
	}
	
	.goods_box .goods .tag_box .tag:nth-child(1){
		margin-left: 0;
	}
	
	.goods_box .goods .tag_box .tag:nth-child(1){
		background-color: #FDF1C2;
		color: #BC8519;
	}
	
	.goods_box .goods .tag_box .tag:nth-child(2){
		background-color: #FEEFEC;
		color: #DB2114;
	}
	
	.goods_box .goods .tag_box .tag:nth-child(3){
		background-color: #F7F8FD;
		color: #222222;
	}
	
	.goods_box .goods .num{
		margin-top: 1vw;
		font-size: 3vw;
		color: #979AA9;
	}
	
</style>
